<div class="layui-tab layui-tab-fixed layui-tab-brief">
	<ul class="layui-tab-title">
		<li class="layui-this">配置</li>
	</ul>
	<div class="layui-tab-content">
		<form class="layui-form">
			<div class="layui-tab-item layui-show">
				<div class="layui-form editor-form-node">
					<div class="layui-form-item">
						<label class="layui-form-label">节点名称</label>
						<div class="layui-input-block">
							<input type="text" name="value" placeholder="请输入节点名称" value="{{=d.value}}" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">脚本类型</label>
						<div class="layui-input-block">
							<select name="langType" id="langType">
								<option value="groovy" {{d.data.object.langType=='groovy' ? 'selected': ''}}>groovy</option>
								<option value="javascript" {{d.data.object.langType=='javascript' ? 'selected': ''}}>js</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">脚本代码</label>
						<div class="layui-input-block" style="width:90%;min-height:250px;">
							<textarea id="codePretty"></textarea>
							<textarea  hidden="hidden" name="scriptCode" id="scriptCode">
										{{d.data.object.scriptCode}}
									</textarea>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>

<script>

	$(function(){
		let editor = CodeMirror.fromTextArea(document.getElementById('codePretty'), {
			lineNumbers: true,
			lineWrapping: true,
			styleActiveLine: true,
			matchBrackets: true,
			foldGutter: true,
			lint: true,
			gutters: [
				"CodeMirror-linenumbers",
				"CodeMirror-foldgutter",
				"CodeMirror-lint-markers",
			],
			mode: $("#langType").val(),
			theme: 'dracula'
		});

		var scriptCode = $("#scriptCode").val();
		if(scriptCode && scriptCode !== "undefined"){
			editor.setValue(scriptCode);
		}

		editor.on('change', function(e) {
			$("#scriptCode").val(editor.getValue());
		});
	})

</script>